<template>
  <div>
       <!-- 面包屑导航区域 -->
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图 -->
      <el-card>
        <!-- 添加角色按钮去=区 -->
        <el-row>
          <el-col>
            <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
          </el-col>
        </el-row>
        <!-- 角色列表区 -->
        <el-table :data="rolelist" border stripe>
          <!-- 展开列 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <pre>
                {{scope.row}}
              </pre> 
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="角色名称" prop="rolesName"></el-table-column>
          <el-table-column label="角色描述" prop="rolesDesc"></el-table-column>
          <el-table-column label="操作"width='300px'>
            <template slot-scope="scope">
              <el-button size="mini" type="primary"
              @click="showEditDialog(scope.row.rid)"
               >
               编辑
              </el-button>
              <el-button size="mini" type="danger"
               @click="removeRoleById(scope.row.rid)"
          
              >
              删除</el-button>
              <el-button size="mini" type="warning">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

  <!-- 添加用户的对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
      >
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户的对话框 -->
    <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @cloes="editDialogClosed"
      >
      <el-form 
      :model="editForm" 
      :rules="editFormRules"
       ref="editFormRef" 
       label-width="100px" 
       >
        <el-form-item label="角色名称" prop="rolesName">
          <el-input v-model="editForm.rolesName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="rolesDesc">
          <el-input v-model="editForm.rolesDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRolesInfo">确 定</el-button>
      </span>
    </el-dialog>

  
  </div>
</template>
<script>
export default {
  data(){
    // 验证邮箱的规则
    var checkEmail=(rule,value,cb)=>{
      //验证邮箱的正则表达式
      const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if(regEmail.test(value)){
        //合法邮箱
        return cb()
      }
      cb(new Error('请输入合法邮箱'))
    }
    //验证手机号的规则
    var checkPhone=(rule,value,cb)=>{
      //验证手机号的正则表达式
      const regPhone=/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if(regPhone.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return{
      //所有角色列表数据
      rolelist:[],
      //控制添加用户框的显示与隐藏
      addDialogVisible:false,
      //添加用户的表单数据
      addForm:{
        username:'',
        password:'',
        email:'',
        mobile:''
      },
      //添加表单的验证规则对象
      addFormRules:{
        username:[
          {required:true,message:'请输入用户名字',trigger:'blur'},
          {min:3,max:10,message:'用户的长度在3~10个字符之间',trigger:'blur'}
        ],
        password:[
        {required:true,message:'请输入用户密码',trigger:'blur'},
        {min:6,max:15,message:'用户的长度在6~15个字符之间',trigger:'blur'}
        ],
        email:[
        {required:true,message:'请输入邮箱',trigger:'blur'},
        {validator:checkEmail,trigger:'blur'}
        ],
        mobile:[
        {required:true,message:'请输入手机',trigger:'blur'},
        {validator:checkPhone,trigger:'blur'}
        ]
      },
      //控制修改用户对话框的显示与隐藏
      editDialogVisible:false,
      //查询到的用户对象
      editForm:{},
      //修改表单的验证规则对象
      editFormRules:{
        rolesName:[
          {required:true,message:'请输入角色名称',trigger:'blur'}
        ],
        rolesDesc:[
        {required:true,message:'请输入角色描述',trigger:'blur'}
        ]
      }
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    //获取所有角色的列表
    getRolesList(){
      this.axios.get('/roles').then(res=>{
        console.log(res)
        this.rolelist=res.data.result;
      });
    },
    //监听添加用户对话框的关闭事件
    addDialogClosed(){//重置表单
      this.$refs.addFormRef.resetFields()
    },
    //点击按钮，添加新用户
    adduser(){
      this.$refs.addFormRef.validate(valid=>{
        if(!valid) return
        //可以发起添加用户的网络请求
        this.axios.post('/users',{addForm:this.addForm}).then(res=>{
          // console.log(res);
          if(res.data.code!==201) {
            this.$message.error('添加用户失败')
          }
          this.$message.success('添加用户成功');
          //隐藏添加用户的对话框
          this.addDialogVisible=false;
          //重新获取用户列表数据
          this.getRolesList();
        })
      })
    },
    //展示编辑角色的对话框
    showEditDialog(rid){
      // console.log(rid);
      this.axios.get('/role',{params:{rid:rid}}).then(res=>{
        // console.log(res.data.result)
        if(res.data.code!==201){
          return this.$message.error('查询用户信息失败');
        }
        this.editForm=res.data.result[0];
      })
      this.editDialogVisible=true
    },
    //监听修改角色对话框的关闭事件
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    //修改角色信息并提交
    editRolesInfo(){
      this.$refs.editFormRef.validate(valid=>{
        if(!valid) return
        //发起修改角色信息的数据请求
        this.axios.put('/role',
        {
            rid:this.editForm.rid,
            rolesName:this.editForm.rolesName,
            rolesDesc:this.editForm.rolesDesc,
        }).then(res=>{
          if(res.data.code!==200){
            return this.$message.error('更新用户信息失败！');
          }
          //关闭对话框
          this.editDialogVisible=false;
          //刷新数据列表
          this.getRolesList()
          //提示修改成功
          this.$message.success('更新用户信息成功！')
        })
      })
    },
    //根据id删除对应的角色信息
   async removeRoleById(rid){
     //询问用户是否删除
     const confirmResult=await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        //如果用户确认删除，则返回值为字符串confirmssssssss
        //如果用户取消了删除，则返回值为字符串cancel
        // console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('已取消删除')
        }
        this.axios.delete('/roles',{params:{rid:rid}}).then(res=>{
          if(res.data.code!==200){
            return this.$message.error('删除用户失败！');
          };
          this.$message.success('删除用户成功');
          //刷新数据列表
          this.getRolesList()
        })
    }
  }
}
</script>
<style lang="less" scoped>

</style>